import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Hook1 from './Hooks1';
import Hook2 from './Hooks2';
import Hook3 from './Hooks3';
import Hook4 from './Hooks4';
import Hook5 from './Hook5';
import Hooks6 from './Hooks6';
import { BrowserRouter, Route, Link } from 'react-router-dom'

// 1 基础路由案例 

// const bbb = () => <h1>hello wolrd</h1>
// const ccc = () => <h1>ccc</h1>

// const HelloWorld = () =>(
//   <BrowserRouter>
//       <div>
//           <h1>helloworld react路由基础</h1>
//           {/* 对标vuerouter-link */}
//           <Link to='/first'>跳转页面1</Link>
//           <Link to='/two'>跳转页面2</Link>
//           {/* router-view */}
//           <Route path='/first' component= {bbb}></Route>
//           <Route path='/two' component= {ccc}></Route>
//       </div>
//   </BrowserRouter>
// )



// class Login extends React.Component {
//   constructor(props){
//      super(props)
//      this.state = {

//      }
//   }

//   login1 = () => {
//     //  类似于 vue  $router
//     this.props.history.push('/home')
//   }
//   componentDidMount(){

//   }
//   render() {
//     return (
//       <div>
//         <p>登录界面</p>
//         <button onClick={this.login1}>登录</button>
//       </div>
//     )
//   }

// }

// const Home = (props) => {
//   console.log('home')
//   const handleback = () => {
//     props.history.go(-1)
//   }
//   return (
//     <div>
//       home组件
//       <button onClick={ handleback}>返回原来页面</button>
//     </div>
//   )
// }



// const Test1 = () => (
//   <BrowserRouter>
//     <div>
//       <h1>编程导航学习</h1>
//       <Link to='/login'>去登录页面</Link>
//       <Route path='/login' component={Login}></Route>
//       <Route path='/home' component={Home}></Route>
//     </div>
//   </BrowserRouter>
// )



// const Home1 = (props) => {


//   return (
//     <div>
//       <h2>我是 首页  </h2>

//     </div>
//   )
// }




// const Test2 = () => (
//   <BrowserRouter>
//     <div>
//       <h1>默认路由</h1>
//       {/* <Route path='/' component={Home1}></Route> */}
//        <Route path='/home' component={Home1}></Route>
//     </div>
//   </BrowserRouter>
// )


// const Home1 = (props) => {


//   return (
//     <div>
//       <h2>我是 首页 home1</h2>

//     </div>
//   )
// }
// const A = (props) => {  
//   return (
//     <div>
//       <h2>我是 a</h2>

//     </div>
//   )
// }


// const Test2 = () => (
//   <BrowserRouter>
//     <div>
//       <h1>默认路由</h1>
//      <Route path='/a' component={A}></Route>  
//       <Route exact path='/' component={Home1}></Route>

//     </div>
//   </BrowserRouter>
// )



const Home1 = (props) => {
  return (
    <div>
      <h2>我是 首页 home1</h2>

    </div>
  )
}
const C = (props) => {
  return (
    <div>
      <h2>我是C</h2>

    </div>
  )
}
const A = (props) => {
  return (
    <BrowserRouter>
      <div>
        <Link to='/ccc'>去C</Link>
        <Route path='/ccc' component={C}></Route>
        <div>
          <h2>我是 a</h2>

        </div>

      </div>
    </BrowserRouter>

  )
}


const Test2 = () => (
  <BrowserRouter>
    <div>
      <h1>默认路由</h1>
      <Route path='/a' component={A}></Route>
      <Route exact path='/' component={Home1}></Route>

    </div>
  </BrowserRouter>
)






ReactDOM.render(
  <React.StrictMode>
    <Hooks6 />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
